document.addEventListener("touchend",function(ev){
	// alert("test");
});
Object.prototype.replaceObj = function(obj){
    var value = this.toString();
    for(var key in obj){
        var regExp = new RegExp("{{"+key+"}}","g")
        if(!obj.hasOwnProperty(key)){
            continue;
        }
        value = value.replace(regExp,obj[key]);
    }
    return value;
}
var imgArray = [{
        src:'hotpot/baozi.jpg',
        title:'东北豹',
        desc:'豹皮奢华性感，鲜血淋漓地披在你身上东北豹，全球已不足60只',
        logoImg:'hotpot/baozi.png',
        index:1
    },{
        src:'hotpot/laohu.jpg',
        title:'东北虎',
        desc:'你瞄准的是虎皮虎骨，你杀死的是你的未来2000-2014年，至少1590只老虎被捕杀。东北虎数量全球已不足600只。',
        logoImg:'hotpot/baozi.png',
        index:2
    },{
        src:'hotpot/malu.jpg',
        title:'梅花鹿',
        desc:'温顺可人的精灵，在你的枪口下灰飞烟灭梅花鹿，全球已不足1000只。',
        logoImg:'hotpot/baozi.png',
        index:3
    },{
        src:'hotpot/malu.jpg',
        title:'马鹿',
        desc:'马鹿是野生老虎的主要食物，但在中国大部分老虎分布区，每平方千米的马鹿已不足0.2只。',
        logoImg:'hotpot/malu.png',
        index:4
    }],
    imageIndex = 0,
    template = '<div class="title">{{title}}</div><div class="desc">{{desc}}</div><img class="logo" src="{{logoImg}}">';
var pElement = null;
function shot(element,animalImg){
    var img = imgArray[imageIndex];
    var html = template.replaceObj(img);
    element.innerHTML = html;
    animalImg.src = './images/child.jpg';
    if(!pElement){
        pElement = document.getElementById("animal_div");
    }
    pElement.style.display = "block";
}



function showPic(index) {
    var pano = document.getElementById("pano");
    pano.style.display = "none";
    var page = document.getElementById("detail_page");
    page.style.display = "block";
     if(!pElement){
        pElement = document.getElementById("animal_div");
    }
    // body...
    var leftArrow = document.getElementById("leftArrow"),
        rightArrow = document.getElementById("rightArrow"),
        animalImg = document.getElementById("animalImg"),
        animal_info = document.getElementById("animal_info"),
        centerCircle = document.getElementById("centerCircle");

         imageIndex = index || 0;
            var image = imgArray[--imageIndex],
                src = image.src;
            animalImg.src = src;
            pElement.style.display = "none";



        leftArrow.addEventListener("click",function(ev){
            imageIndex = (imageIndex-1)<=0?0:--imageIndex;
            var image = imgArray[imageIndex],
                src = image.src;
            animalImg.src = src;
            pElement.style.display = "none";
        });
        centerCircle.addEventListener("click",function(ev){
            shot(animal_info,animalImg);
        });
        rightArrow.addEventListener("click",function(ev){
            // alert("centerCircle();");
            imageIndex = (imageIndex+1)>=imgArray.length?(imgArray.length-1):++imageIndex;
            var image = imgArray[imageIndex],
                src = image.src;
            animalImg.src = src;
            pElement.style.display = "none";
        });
}